<div data-role="view" data-title="Maybanhang.Net" id="invoice-detail" data-layout="mobile-view"  data-reload="true"
data-show="load" > 
	<script type="text/javascript">
		var invoiceData;		
		function load(e) {		
			app.showLoading();
			var id = e.view.params.id;		
			if (!id) return;
			$.ajax({
			  type: "GET",
			  url: "service/invoice/" + id,		 
			  dataType : 'json', 
			  async: false,
			}).done(function( data ) {	
				app.hideLoading();
				//alert(data);
				//alert('Data :' + data);		
			  $('#invoiceCode').html(data.invoiceCode);
			  $('#invoiceDate').html(formatDate(data.invoiceDate));
			  $('#customer').html(data.customerName);
			  $('#invoiceUser').html(data.invoiceFullName);
			  $('#totalAmount').html(formatAmount(data.totalAmount));
			  $('#amount').html(formatAmount(data.amount));	
                          $('#payamount').html(formatAmount(data.payAmount));	
                          
			  	var invoiceDetails = data.details;		
			  	
			  	for (i=0;i<invoiceDetails.length;i++)
	  			{	
	  				newLine = "<li><table><tr><td class='invoice-detail-product'>" + invoiceDetails[i].productName + "</td><td class='invoice-detail-quantity'>(x" + invoiceDetails[i].quantity + ")</td><td class='invoice-detail-amount'>" + formatAmount(invoiceDetails[i].amount) + "</td></tr></table></li>"
	  				$("#invoice_details").append(newLine);
				}
			});		
		}
	</script>
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <!-- <span data-role="view-title"></span>-->
             <span ><?php echo UserInformation::getLocationName(); ?></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>
    </header>    
    <ul data-role="listview" data-style="inset">
        <li>
    		<table><tr><td class="invoice-detail-label">Nhân viên</td><td class="invoice-detail-value"><span id='invoiceUser'>0</span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="invoice-detail-label">Số hóa đơn</td><td class="invoice-detail-value"><span id='invoiceCode'>0</span></td></tr></table>    				
    	</li>
    	
    	<li>
    		<table><tr><td class="invoice-detail-label">Khách hàng </td><td class="invoice-detail-value"><span id='customer'>0</span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="invoice-detail-label">Ngày giờ </td><td class="invoice-detail-value"><span id='invoiceDate'>0</span></td></tr></table>
    	</li>
    	
    </ul>
    
    <ul data-role="listview" data-style="inset" id = "invoice_details">
                
    </ul>
        
        <ul data-role="listview" data-style="inset"> 
            <li>
    		<table><tr><td class="invoice-detail-label">Tổng hàng</td><td class="invoice-detail-value"><span id='totalAmount'>0</span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="invoice-detail-label">Giảm giá </td><td class="invoice-detail-value"><span id='reduction'>0</span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="invoice-detail-label">Thành tiền</td><td class="invoice-detail-value"><span id='amount'>0</span></td></tr></table>    		
    	</li>
        <li>
    		<table><tr><td class="invoice-detail-label">Thanh toán</td><td class="invoice-detail-value"><span id='payamount'>0</span></td></tr></table>    		
    	</li>
        </ul>
        
    <script type="text/javascript">    	
    /*
    	$('#invoiceCode').html(invoiceData.invoiceCode);
		  $('#invoiceDate').html(invoiceData.invoiceDate);
		  $('#customer').html(invoiceData.customerName);
		  $('#invoiceUser').html(invoiceData.invoiceFullName);
		  $('#totalAmount').html(invoiceData.totalAmount);
		  $('#amount').html(invoiceData.amount);
		  */
    </script>
</div>